<template>
  <div class="blog-item" @click="navigateToArticle">
    <div class="blog-header">
      <div class="author-info">
        <router-link 
          :to="{ name: 'userProfile', params: { id: blog.authorId }}" 
          class="author-link"
          @click.stop
        >
          <img :src="blog.author.avatar" :alt="blog.author.name" class="author-avatar">
          <div class="author-meta">
            <span class="author-name">{{ blog.author.name }}</span>
            <span class="post-time">{{ blog.createTime }}</span>
          </div>
        </router-link>
      </div>
    </div>
    <div class="blog-content">
      <h2 class="blog-title">{{ blog.title }}</h2>
      <p class="blog-summary">{{ blog.summary }}</p>
      <div class="blog-meta">
        <div class="stats">
          <span class="stat-item">
            <i class="fas fa-comment"></i>
            {{ blog.stats.comments }} 评论
          </span>
          <span class="stat-item">
            <i class="fas fa-thumbs-up"></i>
            {{ blog.stats.likes }} 推荐
          </span>
          <span class="stat-item">
            <i class="fas fa-share"></i>
            {{ blog.stats.shares }} 转发
          </span>
          <span class="stat-item">
            <i class="fas fa-eye"></i>
            {{ blog.stats.views }} 阅读
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
const props = defineProps({
  blog: {
    type: Object,
    required: true,
    validator: (blog) => {
      return blog.id && 
             blog.title && 
             blog.author && 
             blog.author.name && 
             blog.author.avatar &&
             blog.stats
    }
  }
})

const navigateToArticle = () => {
  router.push({
    name: 'article',
    params: { id: props.blog.id }
  })
}
</script>

<style scoped>
.blog-item {
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

.blog-header {
  margin-bottom: 16px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.author-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.author-name {
  color: var(--primary-color);
  font-weight: 500;
}

.post-time {
  color: var(--text-lighter);
  font-size: 14px;
}

.blog-content {
  padding-left: 60px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.blog-title {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.blog-summary {
  color: var(--text-light);
  margin-bottom: 12px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}

.blog-meta {
  display: flex;
  justify-content: flex-end;
}

.stats {
  display: flex;
  gap: 16px;
  color: var(--text-lighter);
  font-size: 14px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-item i {
  font-size: 12px;
}

.blog-item:hover {
  background-color: rgba(0, 0, 0, 0.01);
}

.blog-item:hover .blog-title {
  color: var(--primary-color);
}

.author-link:hover .author-name {
  text-decoration: underline;
}
</style> 